<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
User: WGSpring
Date: 2018/9/26
Time: 9:45
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>shanyu.work</title>
    <!-- Bootstrap core CSS -->
    <link href="../../css/bootstrap.css" rel="stylesheet">
    <!-- Add custom CSS here -->
    <link href="../../css/slidefolio.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="../../fonts/css/font-awesome.min.css" rel="stylesheet">

</head>
<body>
<!-- Header Area -->
<div id="top" class="header">
    <div class="vert-text">
        <img class="img-rounded" alt="Company Logo" style="width: 120px;" src="../../img/logo.jpg"/>
        <h2><em>shanyu.work</em></h2>
        <a href="#about" class="btn btn-top">浏览更多</a>
    </div>
</div>
<!-- /Header Area -->
<div id="nav">
    <!-- Navigation -->
    <nav class="navbar navbar-new" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mobilemenu">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class="navbar-brand">shanyu.work</a>
            </div>
            <div class="collapse navbar-collapse" id="mobilemenu">

                <ul class="nav navbar-nav navbar-right text-center">
                    <li><a href="#top"><i class="service-icon fa fa-home"></i>&nbsp;主页</a></li>
                    <li><a href="#about"><i class="service-icon fa fa-info"></i>&nbsp;介绍</a></li>
                    <li><a href="#services"><i class="service-icon fa fa-camera"></i>&nbsp;上传</a></li>
                    <li><a href="#portfolio"><i class="service-icon fa fa-laptop"></i>&nbsp;所有</a></li>
                    <li><a href="#contact"><i class="service-icon fa fa-envelope"></i>&nbsp;登陆</a></li>

                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="service-icon fa fa-reorder"></i>&nbsp;其他</a>
                        <ul class="dropdown-menu text-left" style="min-width:100px">
                            <li><a href="https://music.2333.me/"><i class="service-icon fa fa-music"></i>&nbsp;&nbsp;找音乐</a></li>
                            <li><a href="#"><i class="service-icon fa fa-tag"></i>&nbsp;&nbsp;项目二</a></li>
                            <li><a href="#"><i class="service-icon fa fa-tag"></i>&nbsp;&nbsp;项目三</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div>
    </nav>
    <!-- /Navigation -->
</div>
<!-- About -->
<div id="about" class="about_us">
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2 text-center">
                <h2>介&nbsp;&nbsp;&nbsp;&nbsp;绍</h2>
                <p class="lead">遇见你，我一生的幸运</p>
            </div>
        </div>
    </div>
</div>
<!-- /About -->
<!-- Services -->
<div id="services" class="services">
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-md-offset-4 text-center">
                <h2>上传照片</h2>
                <hr>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 text-center">
                <div class="service-item" id="uploads-section">
                    <i class="service-icon fa fa-picture-o fa-3x"></i>
                    <h3>上传</h3>
                    <p>选择一个已有的照片进行上传</p>
                </div>
            </div>
            <div class="col-md-4 text-center">
                <div class="service-item">
                    <i class="service-icon fa fa-camera fa-3x"></i>
                    <h3>现拍</h3>
                    <p>使用设备摄像头现在就拍一个吧</p>
                </div>
            </div>
            <div class="col-md-4 text-center">
                <div class="service-item">
                    <i class="service-icon fa fa-globe fa-3x"></i>
                    <h3>网络</h3>
                    <p>输入网络链接，直接保存图片到系统</p>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /Services -->

<!-- Portfolio -->
<div id="portfolio" class="portfolio">
    <div class="container">
        <div class="row push50">
            <div class="col-md-4 col-md-offset-4 text-center">
                <h2>所有相片</h2>
            </div>
        </div>

        <%--//时间线主体--%>
        <jsp:include page="timeline.jsp"/>
    </div>
</div>
<!-- /Portfolio -->
<!-- Contact -->
<div id="contact">
    <div class="container">
        <div class="row" id="loginDiv"></div>
    </div>
</div>
<!-- /Contact -->
<!-- Footer -->
<footer>
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3 text-center">
                <h2>感谢访问</h2>
                <em>Copyright &copy; Company 2018</em> <a href="http://shanyu.work/" target="_blank"
                                                          title="shanyu.work">shanyu.work</a>
            </div>
        </div>
    </div>
</footer>
<!-- /Footer -->
<!-- Bootstrap core JavaScript -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../../js/jquery.js"></script>
<script src="../../js/jquery.cookie.js"></script>
<script src="../../js/jquery-scrolltofixed-min.js"></script>
<script src="../../js/jquery.vegas.js"></script>
<script src="../../js/jquery.validate.min.js"></script>
<script src="../../js/script.js"></script>
<script src="../../js/bootstrap.js"></script>

<!-- Slideshow Background  -->
<script>
    $.vegas('slideshow', {
        delay: 5000,
        backgrounds: [
            {src: './img/close-up/1.jpg', fade: 2000},
            {src: './img/close-up/2.jpg', fade: 2000},
            {src: './img/close-up/3.jpg', fade: 2000},
            {src: './img/close-up/4.jpg', fade: 2000},
            {src: './img/close-up/5.jpg', fade: 2000},
            {src: './img/close-up/6.jpg', fade: 2000},
            {src: './img/close-up/7.jpg', fade: 2000}

        ]
    })('overlay', {
        src: './img/overlay.png'
    });

</script>
<!-- /Slideshow Background -->

<script>
    $(function () {

        //根据是否登陆决定显示登陆框还是登陆者信息
        var loginDiv = $("#loginDiv");
        if ($.cookie('name') === undefined) {
            var div = '<div class="col-md-4 col-md-offset-4 text-center">\n' +
                '    <h2>登&nbsp;&nbsp;&nbsp;&nbsp;陆</h2>\n' +
                '    <hr>\n' +
                '</div>\n' +
                '<div class="col-md-5 col-md-offset-3">\n' +
                '    <!-- contact form starts -->\n' +
                '    <form id="contact-form" class="form-horizontal">\n' +
                '        <fieldset>\n' +
                '            <div class="form-group">\n' +
                '                <label class="col-sm-4 control-label" for="name">账号</label>\n' +
                '                <div class="col-sm-8">\n' +
                '                    <input type="text" placeholder="Your Name" class="form-control" name="name"\n' +
                '                           id="name">\n' +
                '                </div>\n' +
                '            </div>\n' +
                '            <div class="form-group">\n' +
                '                <label class="col-sm-4 control-label" for="password">密码</label>\n' +
                '                <div class="col-sm-8">\n' +
                '                    <input type="password" placeholder="Your Password" class="form-control"\n' +
                '                           name="password"\n' +
                '                           id="password">\n' +
                '                </div>\n' +
                '            </div>\n' +
                '            <div class="col-sm-offset-4 col-sm-8">\n' +
                '                <button type="button" id="login_button" data-loading-text="登陆中..." class="btn btn-success">登陆</button>\n' +
                '                <button type="reset" class="btn btn-primary">重置</button>\n' +
                '            </div>\n' +
                '        </fieldset>\n' +
                '    </form>\n' +
                '\n' +
                '    <!-- contact form ends -->\n' +
                '</div>'
            loginDiv.append(div);
        } else {
            var div = '<div class="col-md-4 col-md-offset-4 text-center">\n' +
                '           <h2>欢迎Dear&nbsp;&nbsp;' + $.cookie('name') + '</h2>\n' +
                '           <hr>\n' +
                '           <div>\n' +
                '                <button id="logout_button" class="btn btn-warning">注销</button>\n' +
                '           </div>\n' +
                '      </div>';
            loginDiv.append(div);
        }
    });
</script>


<!-- Custom JavaScript for Smooth Scrolling - Put in a custom JavaScript file to clean this up -->
<script>
    $(function () {
        $('a[href*=#]:not([href=#])').click(function () {
            if (location.pathname.replace(/^\//, '') === this.pathname.replace(/^\//, '')
                || location.hostname === this.hostname) {

                var target = $(this.hash);
                target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                if (target.length) {
                    $('html,body').animate({
                        scrollTop: target.offset().top
                    }, 1000);
                    return false;
                }
            }
        });
    });
</script>
<!-- Navbar -->
<script type="text/javascript">
    $(document).ready(function () {
        $('#nav').scrollToFixed();
    });
</script>
<!-- /Navbar-->

<%--上传图片与登陆处理--%>
<script>
    $(function () {
        // 上传检测是否登陆
        $("#uploads-section").click(function () {
            if ($.cookie('name') === undefined) {
                alert("请先登录！");
                window.location.href = "#contact";
            } else {
                window.location.href = "upload";
            }
        });

        // 登陆
        $("#login_button").click(function () {
            var name = $("#name").val();
            var password = $("#password").val();
            var $btn = $(this).button('loading');
            $.ajax("${pageContext.request.contextPath}/loginCheck", {
                type: "POST",
                data: {"name": name, "password": password},
                success: function (response) {
                    $btn.button('reset');
                    if (response === true) {
                        $.cookie('name', name, {expires: 30, path: '/'});
                        alert("登陆成功 " + $.cookie('name'));
                        window.location.reload(true);
                    } else {
                        alert("请重试！");
                    }
                }
            })
        });

        // 注销
        $("#logout_button").click(function () {
            $.cookie('name', '', {expires: -1, path: '/'});
            window.location.reload(true);
        });

    })
</script>


</body>

</html>